//引入路由的API
import{createRouter,createWebHashHistory} from "vue-router"

//引入页面
const Home = ()=>import('../views/Home.vue');
const About = ()=>import('../views/About.vue');
const UserCenter = ()=>import("../views/uesr-center/index.vue");
const UserProfile = ()=>import("../views/uesr-center/Profile.vue");
const UserSettings = ()=>import("../views/uesr-center/Settings.vue");
//引入404
const NotFound=()=>import("../views/404.vue")

const VuexPage = ()=>import("../views/Vuex.vue")

const routes =[
    {
        path:'/',
        name:'home',
        component:Home
    },
    {
        path:'/about',
        name:'about',
        component:About
    },
    {
        path:'/vuex',
        name:'vuex',
        component:VuexPage
    },
    {
        path:"/user",
        name:"userCenter",
        component:UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:"profile",
                name:"profile",
                component:UserProfile
            },
            {
                path:"settings",
                name:"settings",
                component:UserSettings
            },
        ],
    },
    {
        path:'/:pathMatch(.*)*',
        name:'NotFound',
        component:NotFound,
    },
   
    // {
    //     path:'/product/:id',
    //     name:'product',
    //     component:Product
    // },
]

console.log('routes',routes);


//实例化一个router
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

router.beforeEach((to,from,next)=>{
    console.log('to',to);
    console.log('from',from);
    next()
})

router.afterEach((to,from)=> { 
    console.log('后置守卫to',to);
    console.log('后置守卫from',from);
})

export default router